<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="../lib/vue2.js"></script>
  </head>
  <body>
    <script>
      // 创建一个空对象
      let myObj = {};

      // ES5 defineProperty 精细地控制一个对象的属性
      Object.defineProperty(myObj, "myName", {
        configurable: false,
        get: function () {
          console.log("get");
        },
        set: function (newValue) {
          console.log("set");
        },
      });

      // 访问属性时调用get
      console.log(myObj.myName);
      // 改变属性时调用set

      //   let myObj = {
      //     _myName: "李四",
      //     get myName() {
      //       console.log("get");
      //       return this._myName;
      //     },
      //     set myName(newValue) {
      //       console.log("set");
      //       this._myName = newValue;
      //     },
      //   };

      //   console.log(myObj.myName); // 调用get方法获取原始值
      //   // 输出：get 李四

      //   myObj.myName = "张三"; // 调用set方法设置新值
      //   console.log(myObj.myName); // 再次调用get方法验证新值
      //   // 输出：set get 张三
    </script>
  </body>
</html>
